// TODO
// - Some of the moment happening here is happening with top/left instead of translate()

@import "../_variables";

.effeckt-button {
  position: relative;
}

// Spinner animation
.effeckt-button .spinner {
  position: absolute;
  width: $effeckt-buttons-spinner-size;
  height: $effeckt-buttons-spinner-size;
  top: 50%;
  margin-top: -($effeckt-buttons-spinner-size / 2);
  margin-left: -($effeckt-buttons-spinner-size / 2);
  opacity: 0;
  background-image: url(#{$effeckt-button-spinner});
  background-size: $effeckt-buttons-spinner-size auto;
}


// Easing Setup
.effeckt-button,
.effeckt-button .spinner,
.effeckt-button .label {
  transition: $effeckt-buttons-transition-duration cubic-bezier(0.175, 0.885, 0.320, 1.275) all;
}


// Expand Right
.effeckt-button[data-effeckt-type="expand-right"] .spinner {
  right: $effeckt-buttons-spinner-size / 2;
}
.effeckt-button[data-effeckt-type="expand-right"][data-loading] {
  padding-right: $effeckt-buttons-spinner-size * 2;
}
.effeckt-button[data-effeckt-type="expand-right"][data-loading] .spinner {
  opacity: 1;
}


// Expand Left
.effeckt-button[data-effeckt-type="expand-left"] .spinner {
  left: $effeckt-buttons-spinner-size / 2;
  margin-left: 0;
}
.effeckt-button[data-effeckt-type="expand-left"][data-loading] {
  padding-left: $effeckt-buttons-spinner-size * 2
}
.effeckt-button[data-effeckt-type="expand-left"][data-loading] .spinner {
  opacity: 1;
}


// Expand Up
.effeckt-button[data-effeckt-type="expand-up"] {
  overflow: hidden;
}
.effeckt-button[data-effeckt-type="expand-up"] .spinner {
  top: $effeckt-buttons-spinner-size;
  left: 50%;
}
.effeckt-button[data-effeckt-type="expand-up"][data-loading] {
  padding-top: $effeckt-buttons-spinner-size * 2;
}
.effeckt-button[data-effeckt-type="expand-up"][data-loading] .spinner {
  opacity: 1;
  top: $effeckt-buttons-spinner-size / 2;
  margin-top: 0;
}


// Expand Down
.effeckt-button[data-effeckt-type="expand-down"] {
  overflow: hidden;
}
.effeckt-button[data-effeckt-type="expand-down"] .spinner {
  left: 50%;
  top: 100%;
  margin-top: -($effeckt-buttons-spinner-size * 1.5);
}
.effeckt-button[data-effeckt-type="expand-down"][data-loading] {
  padding-bottom: $effeckt-buttons-spinner-size * 2;
}
.effeckt-button[data-effeckt-type="expand-down"][data-loading] .spinner {
  opacity: 1;
}


// Slide Left
.effeckt-button[data-effeckt-type="slide-left"] {
  overflow: hidden;
}
.effeckt-button[data-effeckt-type="slide-left"] .label {
  position: relative;
}
.effeckt-button[data-effeckt-type="slide-left"] .spinner {
  left: 100%;
}
.effeckt-button[data-effeckt-type="slide-left"][data-loading] .label {
  opacity: 0;
  left: -100%;
}
.effeckt-button[data-effeckt-type="slide-left"][data-loading] .spinner {
  opacity: 1;
  left: 50%;
}


// Slide right
.effeckt-button[data-effeckt-type="slide-right"] {
  overflow: hidden;
}
.effeckt-button[data-effeckt-type="slide-right"] .label {
  position: relative;
}
.effeckt-button[data-effeckt-type="slide-right"] .spinner {
  left: 0%;
}
.effeckt-button[data-effeckt-type="slide-right"][data-loading] .label {
  opacity: 0;
  left: 100%;
}
.effeckt-button[data-effeckt-type="slide-right"][data-loading] .spinner {
  opacity: 1;
  left: 50%;
}


// Slide Up
.effeckt-button[data-effeckt-type="slide-up"] {
  overflow: hidden;
}
.effeckt-button[data-effeckt-type="slide-up"] .label {
  position: relative;
}
.effeckt-button[data-effeckt-type="slide-up"] .spinner {
  left: 50%;
  top: 100%;
}
.effeckt-button[data-effeckt-type="slide-up"][data-loading] .label {
  opacity: 0;
  top: -1em;
}
.effeckt-button[data-effeckt-type="slide-up"][data-loading] .spinner {
  opacity: 1;
  top: 50%;
}


// Slide Down
.effeckt-button[data-effeckt-type="slide-down"] {
  overflow: hidden;
}
.effeckt-button[data-effeckt-type="slide-down"] .label {
  position: relative;
}
.effeckt-button[data-effeckt-type="slide-down"] .spinner {
  left: 50%;
  top: 0%;
}
.effeckt-button[data-effeckt-type="slide-down"][data-loading] .label {
  opacity: 0;
  top: 1em;
}
.effeckt-button[data-effeckt-type="slide-down"][data-loading] .spinner {
  opacity: 1;
  top: 50%;
}


.effeckt-button[data-effeckt-type="zoom-in"],
.effeckt-button[data-effeckt-type="zoom-in"] .spinner,
.effeckt-button[data-effeckt-type="zoom-in"] .label,
.effeckt-button[data-effeckt-type="zoom-out"],
.effeckt-button[data-effeckt-type="zoom-out"] .spinner,
.effeckt-button[data-effeckt-type="zoom-out"] .label {
  transition: $effeckt-buttons-transition-duration ease all;
}


// Zoom Out
.effeckt-button[data-effeckt-type="zoom-out"] {
  overflow: hidden;
}
.effeckt-button[data-effeckt-type="zoom-out"] .spinner {
  left: 50%;
  transform: scale(2.5);
}
.effeckt-button[data-effeckt-type="zoom-out"] .label {
  position: relative;
  display: inline-block;
}
.effeckt-button[data-effeckt-type="zoom-out"][data-loading] .label {
  opacity: 0;
  transform: scale(0.5);
}
.effeckt-button[data-effeckt-type="zoom-out"][data-loading] .spinner {
  opacity: 1;
  transform: none;
}


// Zoom in
.effeckt-button[data-effeckt-type="zoom-in"] {
  overflow: hidden;
}
.effeckt-button[data-effeckt-type="zoom-in"] .spinner {
  left: 50%;
  transform: scale(0.2);
}
.effeckt-button[data-effeckt-type="zoom-in"] .label {
  position: relative;
  display: inline-block;
}

.effeckt-button[data-effeckt-type="zoom-in"][data-loading] .label {
  opacity: 0;
  transform: scale(2.2);
}
.effeckt-button[data-effeckt-type="zoom-in"][data-loading] .spinner {
  opacity: 1;
  transform: none;
}


/*==========================
FILL
==========================*/

@mixin effeckt-button-fill($translateX:0, $translateY:0) {
 overflow: hidden;
 position: relative;

 &:after {
   content: '';
   position: absolute;
   top: 0;
   right: 0;
   width: 100%;
   height: 100%;
   background: #000;
   transform: translate($translateX, $translateY);
   transition: transform $effeckt-buttons-transition-duration;
 }

 &[data-loading] {
   &:after {
     transform: translate(0, 0);
   }
 }

 .effeckt-button-label {
   position: relative;
   z-index: 1;
 }
}

// Fill from left
.effeckt-button[data-effeckt-type="fill-from-left"] {
  @include effeckt-button-fill(-100%,0);
}

// Fill from right
.effeckt-button[data-effeckt-type="fill-from-right"] {
  @include effeckt-button-fill(100%,0);
}

// Fill from top
.effeckt-button[data-effeckt-type="fill-from-top"] {
  @include effeckt-button-fill(0,-100%);
}

// Fill from bottom
.effeckt-button[data-effeckt-type="fill-from-bottom"] {
  @include effeckt-button-fill(0,100%);
}


/*==========================
ICON SLIDE

Example markup:
<button class="effeckt-button" data-effeckt-type="icon-slide from-top">
  <span class="effeckt-button-label demo-button-icon">Icon from top</span>
</button>
==========================*/

/// The "effeckt-button-icon" data-URI and "demo-button-icon" class
// are for demo purposes. A user could apply their own class to the
// button's label to designate the icon/image they want sliding in
// and out -- utilizing the :before pseudo-element to place a
// background image or character from an icon font.
.demo-button-icon:before {
  background: url(#{$effeckt-button-icon}) no-repeat center center;
  background-size: 30px;
}

// General styles
.effeckt-button[data-effeckt-type~="icon-slide"] {
  overflow: hidden;
  // Any padding has to be applied to the inner element, instead of the container.
  // So, override the default styling of .effeckt-button from demo.scss.
  padding: 0;
  .effeckt-button-label {
    padding: 0.8rem 1rem; // And re-apply it here.
    display: block;
    position: relative;
    transition: transform $effeckt-buttons-transition-duration;
    &:before {
      content: '';
      display: block;
      position: absolute;
      width: 100%;
      height: 100%;
    }
  }
}

// Direction-specific styles
.effeckt-button[data-effeckt-type~="icon-slide"] {
  // From top
  &[data-effeckt-type~="from-top"] .effeckt-button-label:before {
    top: -100%;
    left: 0;
    right: 0;
  }
  // From bottom
  &[data-effeckt-type~="from-bottom"] .effeckt-button-label:before {
    bottom: -100%;
    left: 0;
    right: 0;
  }
  // From left
  &[data-effeckt-type~="from-left"] .effeckt-button-label:before {
    left: -100%;
    top: 0;
    bottom: 0;
  }
  // From left
  &[data-effeckt-type~="from-right"] .effeckt-button-label:before {
    right: -100%;
    top: 0;
    bottom: 0;
  }
}

// Active state -- could be applied to a class or data-attribute, instead,
// to make it JS triggered. Hover is easiest for the demo.
.effeckt-button[data-effeckt-type~="icon-slide"][data-loading] {
  &[data-effeckt-type~="from-top"] .effeckt-button-label {
    transform: translateY(100%);
  }
  &[data-effeckt-type~="from-bottom"] .effeckt-button-label {
    transform: translateY(-100%);
  }
  &[data-effeckt-type~="from-left"] .effeckt-button-label {
    transform: translateX(100%);
  }
  &[data-effeckt-type~="from-right"] .effeckt-button-label {
    transform: translateX(-100%);
  }
}

// 3D Rotate Success/Error
.effeckt-button[data-effeckt-type="3d-rotate-success"],
.effeckt-button[data-effeckt-type="3d-rotate-error"] {
  transition: all $effeckt-buttons-transition-duration;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

// Hidden side of the button
.effeckt-button[data-effeckt-type="3d-rotate-error"]:before,
.effeckt-button[data-effeckt-type="3d-rotate-success"]:after {
  white-space: nowrap;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  line-height: 2em;
}

// Hidden side of the button
.effeckt-button[data-effeckt-type="3d-rotate-error"]:before {
  top: 100%;
  content: attr(data-effeckt-message);
  transform-origin: 0% 0%;
  transform: rotateX(-90deg);
  backface-visibility: hidden;
}

// JS add's a 'data-loading' attr, which will triger the transition
.effeckt-button[data-effeckt-type="3d-rotate-error"][data-loading] {
  transform-origin: 50% 0%;
  transform: rotateX(90deg) translateY(-100%);
}

// Hidden side of the button
.effeckt-button[data-effeckt-type="3d-rotate-success"]:after {
  top: -100%;
  content: attr(data-effeckt-message);
  transform-origin: 0% 100%;
  transform: rotateX(90deg);
  backface-visibility: hidden;
}

// JS add's a 'data-loading' attr, which will triger the transition
.effeckt-button[data-effeckt-type="3d-rotate-success"][data-loading] {
  transform-origin: 50% 100%;
  transform: rotateX(-90deg) translateY(100%);
}

